<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style type="text/css">
    .fullscreenvideo{
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-transition: 1s opacity;
        transition: 1s opacity;
    }
    .videocontainer{
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -100;
    }
    .videocontainer:before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        z-index: -1;
        top: 0;
        left: 0;
        background: rgba(25,29,34,.65);
    }


    /* 给下面的page选择第几页的 */
    .borderBox{
        display: inline-block;
        border: 1px solid #978f6c;
        border-radius: 5px;
        width: 25px;
        height: 25px;
        text-align: center;
        cursor:pointer;
    }
    /* 给下面几个page选择第几页的添加选择样式 */
    .pageLect{
        background-color: cornflowerblue;
        color: white;
    }
    /*给页面设置背景图片*/
    body{
       /* background-attachment: fixed;*/
    }
    #importantNotice{
        width: 220px;
        height: 150px;
        /*超出部分隐藏*/
        overflow: hidden;
        /*去除左内边距*/
        padding-left: 0px;
        float: right;
        /*background: #9acfea;*/
        color: red;
    }
    #importantNotice>li{
        /*去除点li前面的点*/
        list-style-type: none;
    }

</style>
<script src="/js/jquery.js"></script>
<script>
    //保存查询条件
    var selParams="";
    //每页多少条数据
    var myPageSize=5;

    var maxShowPage=3;//最大显示的页数量
    var defPage=2;//默认显示第几个
    var rightPage=maxShowPage-defPage;//最右边是第几页
    var leftPage=maxShowPage-rightPage-1;//最左边是第几页

    //定时器id
    var mytiming=12;
    var array=[];
    array[0]="星期日";
    array[1]="星期一";
    array[2]="星期二";
    array[3]="星期三";
    array[4]="星期四";
    array[5]="星期五";
    array[6]="星期六";
    function showDate() {
        var date=new Date();
        var str="";
        str+=date.getFullYear()+"年-"+(date.getMonth()+1)+"月-"+date.getDate()+"日 "
            +date.getHours()+"时:"+date.getMinutes()+"分:"+date.getSeconds()+"秒 "+array[date.getDay()];
        $("#time").html(str);
    }


    //计算该学期所需的总学分和 该学期的名称
    function mySumCredit() {
        $.getJSON("/semester/selSemesterMapAll","",function (data) {
            /*alert(data["[[${user.semesterId}]]"].Careers);*/
            $("#sumCredit").html(data["[[${user.semesterId}]]"].Careers);
            $("#semester").html(data["[[${user.semesterId}]]"].termName);
        });
    }

    //获取该教师的总人数
    function myTeachers(){
        $.getJSON("/teacher/selTeachers","",function (data) {
            var str="<option selected value='0'>全部</option>";
            for (var i=0;i<data.length;i++){
                str+="<option value='"+data[i].id+"'>"+data[i].name+"</option>";
            }
            $("select[name=teacherId]").html(str);
        });
    }

    //进入选课详情页面
    function courseDetails(id) {
        location.href="/studentManagement/succPage/course/courseDetails/"+id;
    }

    //分页按钮  下一页 上一页。。。。。
    function pagingButton(pageInfo) {
        var str="";
        //如果当前页为第一页
        if(pageInfo.pageNum==1){
            str+="<button onclick='selCourses(1,"+myPageSize+",\""+selParams+"\")' disabled='disabled'>首页</button>";
            str+="<button onclick='selCourses("+pageInfo.prePage+","+myPageSize+",\""+selParams+"\")' disabled='disabled'>上一页</button>";
        }else{
            str+="<button onclick='selCourses(1,"+myPageSize+",\"\")'>首页</button>";
            str+="<button onclick='selCourses("+pageInfo.prePage+","+myPageSize+",\""+selParams+"\")'>上一页</button>";
        }


        //显示当前页数与前后页数
        var pn=pageInfo.pageNum;
        var ps=pageInfo.pages;
        var realLeftPage=1;
        var realRightPage=1;
        var num1=0;
        var num2=0;
        if((pn-leftPage)<=0){
            num1=1;
            realLeftPage=1;
        }else{
            realLeftPage=pn-leftPage;
        }
        if((pn+rightPage)>ps){
            num2=1;
            realRightPage=ps;
        }else{
            realRightPage=pn+rightPage;
            if(num1==1){
                if((pn+(maxShowPage-leftPage))<=ps){
                    realRightPage=pn+(maxShowPage-leftPage);
                }else{
                    realRightPage=ps;
                }
            }
        }
        if(num2==1){
            if((pn-(maxShowPage-leftPage))>=1){
                realLeftPage=pn-(maxShowPage-leftPage);
            }else{
                realLeftPage=1;
            }
        }
        for(var i=realLeftPage;i<=realRightPage;i++){
            str+="<button onclick='selCourses("+i+","+myPageSize+",\""+selParams+"\")' value='"+i+"' class='borderBox' >"+i+"</button>";
        }


        //如果当前页为 尾 页
        if(pageInfo.pageNum==pageInfo.pages){
            str+="<button onclick='selCourses("+pageInfo.nextPage+","+myPageSize+",\""+selParams+"\")' disabled='disabled'>下一页</button>";
            str+="<button onclick='selCourses("+pageInfo.pages+","+myPageSize+",\""+selParams+"\")' disabled='disabled'>尾页</button>";
        }else{
            str+="<button onclick='selCourses("+pageInfo.nextPage+","+myPageSize+",\""+selParams+"\")'>下一页</button>";
            str+="<button onclick='selCourses("+pageInfo.pages+","+myPageSize+",\""+selParams+"\")'>尾页</button>";
        }
        str+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
            +pageInfo.pageNum+"/"+pageInfo.pages;
        $("#page").html(str);

        $("#page button[value='"+pageInfo.pageNum+"']").addClass("pageLect");
    }

    //查询
    function selCourses(pageNum,pageSize,myparams){
        var params2="";
        var params1=$("#selCourseList :input").serialize();
        params2=params1+"&pageNum="+pageNum+"+&pageSize="+pageSize;
        selParams=params1;//保存 查询 参数好让分页使用
        if(myparams!=null && myparams!=''){
            params2=myparams+"&pageNum="+pageNum+"+&pageSize="+pageSize;
            selParams=myparams;//如果你是分页按钮进来的那么我不刷新 查询参数
        }
        $.getJSON("/studentManagement/succPage/course/selCourseList",params2,function (mydata) {


            //返回的是json数据
           /* alert(JSON.stringify(mydata));*/
            //课程list集合
            /*var data=mydata.mycourses;*/
            var data=mydata.pageInfo.list;
            //教师map集合
            var myteachers=mydata.myteachers;
            //地址map集合
            var mysemesters=mydata.mysemesters;
            //选课记录集合
            var myCRs=mydata.myCRs;

            var str="";
            for (var i=0;i<data.length;i++){
                //方便把阿拉伯数字换成星期几
                var tution=data[i].tution;
                if(tution==7){
                    tution=0;
                }
                str+="<tr>";
                str+="<td>"+data[i].id+"</td>";
                str+="<td>"+data[i].name+"</td>";
                str+="<td>"+data[i].marks+"</td>";
                str+="<td>"+array[tution]+"</td>";
                str+="<td>"+(mysemesters[data[i].semesterId].termName)+"</td>";
                str+="<td>"+(myteachers[data[i].teacherId].name)+"</td>";
                str+="<td>"+data[i].amount+"</td>";
                str+="<td><button onclick='courseDetails("+data[i].id+")'>选课详情</button></td>";
                /////////////////退课没写/////////////////
                /*alert(myCRs[data[i].id]+"||"+data[i].name);*/
                var isyn=false;
                if(myCRs[data[i].id]!=null){
                    isyn=!(myCRs[data[i].id].userId=="[[${user.id}]]");//判断是不是自己选的
                }
                str+="<td>"
                    +((myCRs[data[i].id]==null||myCRs[data[i].id]==undefined||isyn)?"未选":((myCRs[data[i].id].ifTheSelected==1)?"以退课":"<button onclick='dropTheCourse("+data[i].id+")'>退课</button>"))
                    +"</td>";/*<button onclick=''></button>*/
                str+="</tr>";
            }
            $("#myCourseList tr:gt(0)").remove();
            $("#myCourseList").append(str);

            //获取pageInfo
            var pageInfo=mydata.pageInfo;
            //生成分页按钮
            pagingButton(pageInfo);
        });
    }
    //进入修改当前用户信息页面
    function upMyUser(){
        location.href="/studentManagement/succPage/user/upMyUser";
    }

    //重要通知滚动显示框
    function rollingNotice(){
        /*var myrll=-21;
        setInterval(function () {
            $("#importantNotice li:first").animate({"margin-top":myrll},3000,roll=function () {
                $(this).appendTo("#importantNotice");
                $(this).css("margin-top","0");
            });
        },0);*/
        var myrll=parseInt($("#importantNotice>li:first").css("margin-top"));;
        var timing=setInterval(function () {
            $("#importantNotice li:first").animate({"margin-top":--myrll},0,roll=function () {
                if(-myrll==$(this).height()){
                    myrll=0;
                    $("#importantNotice li:first").appendTo("#importantNotice");
                    $(this).css("margin-top",0);
                    /*$("#importantNotice li:last").css("margin-top",0);*/
                    //由于我把当前标签移动到最后一个所以我改不了
                    /*$("#importantNotice li:first").css("margin-top","0");*/
                }
            });
        },50);
        return timing;
    }

    //给body设置背景图片
    function bodyCss(){
        $("body").css("background","url(/[[${user.photo}]]) no-repeat");
        $("body").css("background-size","cover");//指定图片大小，完全平铺与网页
        $("body").css("opacity","1");
        /*$("body").css("background","rgba(0,0,0,0.5)");*/
    }

    //退课
    function dropTheCourse(id){
        var params="id="+id;
        $.getJSON("/studentManagement/succPage/course/dropTheCourse",params,function (data) {
            if(data>0){
                alert("退课成功");
            }
            selCourses(1,myPageSize,selParams);
        });
    }

    $(function () {
        //加载用户头像
        $("#userPhoto").attr("src","/[[${user.photo}]]");
        //给body设置背景
        bodyCss();
        //加载现在的时间
        showDate();
        //每过一秒加载现在的时间
        setInterval(showDate,1000);
        //显示当前学期  和所需分数
        mySumCredit();
        //在查询条件中显示教师
        myTeachers();
        //初始化默认查询全部
        selCourses(1,myPageSize);
        //当点击的时候查询
        $("#find").click(function () {
            selCourses(1,myPageSize);
        });
        //等上面加载完数据（给我要显示的主要通知添加数据,现在先写死）  让重要通知滚动起来
        mytiming=rollingNotice();
        //当我移动到主要通知时
        $("#importantNotice").hover(
            function () {
                clearInterval(mytiming);
            },
            function () {
                mytiming=rollingNotice();
            }
        );
        //表示来新的信息
        /*letter();*/

        //webSockect
        /*siteInbox();*/
    });
</script>

<!--百度怎么打开指定IP地址的  指定路径图片   已解决------>
<img width="260px" height="160px" id="userPhoto" src="">
<button onclick="upMyUser()">修改当前用户信息</button>

<!--退出登入 等 多种页面 右上角  小按键-->
<div style="display: inline-block;float: right"
     th:insert="/succPage/public/head::header"></div>

<br/>
<ul id="importantNotice">
    <li>・2010考研英语大纲到货75折...</li>
    <li>・权威定本四大名著（人民文...</li>
    <li>・口述历史权威唐德刚先生国...</li>
    <li>・袁伟民与体坛风云：实话实...</li>
    <li>・我们台湾这些年：轰动两岸...</li>
    <li>・畅销教辅推荐：精品套书50...</li>
    <li>・2010版法律硕士联考大纲75...</li>
    <li>・计算机新书畅销书75折抢购</li>
    <li>・2009年孩子最喜欢的书&gt;&gt;</li>
    <li>・弗洛伊德作品精选集59折</li>
    <li>・2010考研英语大纲到货75折...</li>
    <li>・权威定本四大名著（人民文...</li>
    <li>・口述历史权威唐德刚先生国...</li>
    <li>・袁伟民与体坛风云：实话实...</li>
    <li>・我们台湾这些年：轰动两岸...</li>
    <li>・畅销教辅推荐：精品套书50...</li>
</ul>

<h3>欢迎你:[[${user.name}]][[${user.sex==0?'女士':'先生'}]]!，你选学分数为:[[${user.mark}]],当前<span id="semester"></span>学期所需总学分为:<span id="sumCredit"></span></h3>
<!--视频背景-->
<!--<div class="videocontainer">
    <video class="fullscreenvideo" poster="/海报.jpg" id="bgvid" playsinline="" autoplay=""
        loop="">
        <source src="/xuanku.mp4" type="/xuanku.mp4">
    </video>
</div>-->

<div id="selCourseList">
    选择状态：
    <select name="elect">
        <option selected value="0">全部</option>
        <option value="1">可选课程</option>
        <option value="2">已选课程</option>
        <option value="3">不可选课程</option>
        <option value="4">退课课程</option>
    </select><br>
    课程名称：<input type="text" name="name"><br>
    教师名称：
    <select name="teacherId">
        <option selected value='0'>全部</option>
    </select><br>
    上课日期(周几):
    <select name="tution">
        <option selected value="0">全部</option>
        <option value="1">周一</option>
        <option value="2">周二</option>
        <option value="3">周三</option>
        <option value="4">周四</option>
        <option value="5">周五</option>
        <option value="6">周六</option>
        <option value="7">周日</option>
    </select><br>
    <button id="find">查找</button>
</div>
<span style="color: rgba(89,255,0,0.78)">注：已选课程有前面的学期是因为以前学期选过</span>
<table id="myCourseList">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价值分数</th>
        <th>开课时间</th>
        <th>学期</th>
        <th>教师</th>
        <th>课程数量</th>
        <th>详细信息</th>
        <th>操作</th>
    </tr>
</table>
<div id="page"></div>


<p>
<p>登入成功!!2018参考网上实例</p>
当前时间为<span id="time">2020年-12月-24日 23时:23分:50秒 星期二</span>
</p>

</body>
</html>